<script setup lang="ts">
import { watch } from 'vue';
import { QUERY_ASSET_LIST } from '/@/api/modules/archive/archive-manage';
import { state } from './state';

interface Props {
  modelValue: boolean;
  /**
   * 标题
   */
  title?: string;
  /**
   * 请求参数
   */
  options?: AssetManageApi.QueryAssetListReq;
}

interface Emits {
  (e: 'update:modelValue'): void;
  (e: 'onSelected', info: AssetInfo.Dto): void;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: '资产',
  options: () => {
    return {};
  },
});
const emits = defineEmits<Emits>();

/**
 * @description 列表查询
 * @param page -当前页
 * @param pageSize -每页条数
 * @param keyword
 */
function queryList(page: number = 1, pageSize: number = 15, keyword: string = '') {
  if (!page && state.finished) return;
  state.loading = true;

  QUERY_ASSET_LIST({
    comQuery: { page, pageSize },
    keyword,
    ...props.options,
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.assetInfoList || !res.assetInfoList.length) return;

      res.assetInfoList.forEach((item) => state.list.push(item));

      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage, 15, state.keyword);
}

watch(props, (newProps) => {
  if (!newProps.modelValue) return;

  state.activePage = 1;
  state.finished = false;
  state.loading = false;
  state.keyword = '';
  state.list = [];
  onLoading();
});
</script>

<template>
  <nut-popup
    :visible="props.modelValue"
    position="bottom"
    closeable
    round
    :style="{ height: '90vh' }"
    @click-close-icon="emits('update:modelValue')"
    @click-overlay="emits('update:modelValue')"
  >
    <view class="app-asset-list-popup app-popup--2">
      <view class="app-asset-list-popup__header app-popup__header">{{ props.title }}</view>
      <nut-searchbar
        v-model="state.keyword"
        placeholder="请输入档案编号/档案名称"
        @search="
          () => {
            state.activePage = 1;
            state.finished = false;
            state.loading = false;
            state.list = [];
            onLoading();
          }
        "
      >
        <template v-slot:rightout>
          <text
            @click="
              () => {
                state.activePage = 1;
                state.finished = false;
                state.loading = false;
                state.list = [];
                onLoading();
              }
            "
          >
            搜索
          </text>
        </template>
      </nut-searchbar>
      <scroll-view
        class="app-popup__wrapper"
        :scroll-y="true"
        :lower-threshold="100"
        @scrolltolower="onLoading()"
      >
        <view class="app-asset-list-popup__wrapper">
          <app-archives-item
            v-for="item in state.list"
            :key="item.id"
            :info="item"
            @click="
              () => {
                emits('onSelected', item);
              }
            "
          />
        </view>

        <view class="app-popup__list-tips">
          <text v-if="!state.list.length">暂无数据！</text>
          <text v-else-if="state.list.length && state.loading">加载中...</text>
          <text v-else-if="state.list.length && state.finished">加载完成!</text>
        </view>
      </scroll-view>
    </view>
  </nut-popup>
</template>

<style lang="scss">
@import './index.scss';
</style>
